<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div style="font-size: 29px; font-weight: 600; padding: 20px; letter-spacing: 2px">翼飞自助台球后台管理系统</div>
                <el-card shadow="hover" class="mgb20" style="height: 252px">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ name }}</div>
                            <div>{{ role }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.memberUsers }}</div>
                                    <div>总会员人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-s-home grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.shopUsers }}</div>
                                    <div>总商家入驻</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ Math.floor(list.money) }}</div>
                                    <div>平台总店铺共收益</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-4">
                                <i class="el-icon-user-solid grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.users }}</div>
                                    <div>总用户人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-5">
                                <i class="el-icon-house grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.shops }}</div>
                                    <div>店铺数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-7">
                                <i class="el-icon-document-remove grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.orderNums }}</div>
                                    <div>平台总订单数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-6">
                                <i class="el-icon-cpu grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ list.eqs }}</div>
                                    <div>总设备数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <div>
                    <div class="crumbs">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item> <i class="el-icon-user"></i> 商家营业数据 </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="container">
                        <div class="handle-box">
                            <div style="margin-left: 20px;">
                                时间筛选：
                                <el-select v-model="value" placeholder="请选择时间" @change="change">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-left: 20px;">
                                店铺筛选：
                                <el-select v-model="value1" placeholder="请选择店铺" @change="shopchange">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-left: 20px;">
                                <span>选择日期</span>
                                <el-date-picker
                                    size="small"
                                    v-model="value2"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="margin-left: 20px;"
                                    @change="dataChange"
                                    value-format="yyyy-MM-dd"
                                >
                                </el-date-picker>
                            </div>
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 20px">搜索</el-button>
                            <el-button type="success" icon="el-icon-setting" @click="handleSetting" style="margin-left: 20px"
                                >重置</el-button
                            >
                        </div>

                        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="f_shopowner" label="商家姓名"></el-table-column>
                            <el-table-column prop="f_shop_name" label="店铺名称"></el-table-column>
                            <el-table-column prop="syncmoney" label="总营业额"></el-table-column>
                            <el-table-column prop="paymoney" label="实际入账"></el-table-column>
                            <el-table-column prop="money" label="收入提现金额"></el-table-column>
                            <el-table-column prop="approveMoney" label="待提现金额"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { homeShopData, getHomePageData, shopList } from '../../api/index';
import Schart from 'vue-schart';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            query: {
                page: 1,
                pageNum: 10,
                type: 1 //商家列表
            },
            tableData: [],
            pageTotal: 0,
            name: '',
            startTime:'',
            endTime:'',
            options: [
                {
                    value: '0',
                    label: '今日'
                },
                {
                    value: '1',
                    label: '昨日'
                },
                {
                    value: '2',
                    label: '本周'
                },
                {
                    value: '3',
                    label: '本月'
                }
            ],
            options1: [
                {
                    label: '',
                    value: ''
                }
            ],
            value: '',
            value1: '',
            value2: '',
            list: {},
            type: '1',
            shopid: ''
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '管理员';
        }
    },
    created() {
        this.getData();
        this.getpp(1);
        this.showList();
    },

    methods: {
        dataChange(e){
            this.startTime = e[0];
            this.endTime = e[1];
            console.log(e,'时间',this.startTime,this.endTime)
        },
        //商家筛选列表
        showList() {
            shopList({
                type: 2
            }).then((res) => {
                // this.shopList = res.data;
                let arr = res.data;
                this.options1 = arr.map((item) => {
                    return {
                        label: item.f_shop_name,
                        value: item.id
                    };
                });
                console.log(res.data, '商家列表');
            });
        },
        //日期选择
        change(e) {
            this.type = e;
        },
        //店铺选择
        shopchange(e) {
            this.shopid = e;
        },
        getpp(type) {
            console.log(this.shopid,'getpp')
            homeShopData({
                type: this.type,
                shopId: this.shopid,
                endTime:this.endTime,
                startTime:this.startTime
            }).then((res) => {
                //状态传1的时候 是对象
                if (type == 1) {
                    this.tableData = res.data.shop;
                    //状态传2的时候 是数组
                } else if (type == 2) {
                    this.tableData = [];
                    this.tableData.push(res.data.shop);
                    // console.log(this.tableData)
                }
                console.log(this.tableData, '\\\\\\\\\\\\\\\\');
                // this.pageTotal = res.data.count || 50;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            if (this.shopid == 0) {
                this.getpp(1);
            } else {
                this.getpp(2);
            }
        },
        handleSetting() {
            homeShopData({
                type: '1',
                shopId: 0
            }).then((res) => {
                console.log(this.options1, this.value1);
                this.tableData = res.data.shop;
            });
            this.value = '';
            this.value1 = '';
        },
        getData() {
            getHomePageData({}).then((res) => {
                this.list = res.data;
                console.log(res.data, '首页');
            });
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    display: flex;
}

.handle-select {
    width: 120px;
}
.container{
    width: 97%;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.green {
    color: rgb(38, 141, 38);
}
.red {
    color: red;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    /* margin: auto; */
    width: 40px;
    height: 40px;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.grid-con-4 .grid-con-icon {
    background: rgb(227, 240, 55);
}

.grid-con-4 .grid-num {
    color: rgb(227, 240, 55);
}
.grid-con-5 .grid-con-icon {
    background: rgb(247, 148, 214);
}

.grid-con-5 .grid-num {
    color: rgb(247, 148, 214);
}
.grid-con-6 .grid-con-icon {
    background: rgb(51, 233, 233);
}

.grid-con-6 .grid-num {
    color: rgb(51, 233, 233);
}
.grid-con-7 .grid-con-icon {
    background: rgb(154, 133, 231);
}

.grid-con-7 .grid-num {
    color: rgb(154, 133, 231);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
